<template>
  <div>
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      :show-close="false"
      width="800px"
    >
      <el-form
        ref="garageDialog"
        :model="row"
        :rules="rules"
        label-width="125px"
        :disabled="row.state0 === 1"
      >
        <el-form-item label="车辆品牌:" prop="cartype0">
          <el-select v-model="row.cartype0" placeholder="请选择" clearable>
            <el-option
              v-for="item in CarNameList()"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="车辆类型:" prop="cartype1">
          <el-select v-model="row.cartype1" placeholder="请选择" clearable>
            <el-option
              v-for="item in CarTypeList()"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="广告语:" prop="des" style="width: 450px;">
          <el-input
            v-model="row.des"
            rows="4"
            type="textarea"
            maxlength="100"
            size="medium"
            placeholder="请输入广告语(100字以内)"
          />
        </el-form-item>
        <el-form-item label="日租金:" prop="dayprice" style="width: 350px;">
          <el-input
            v-model="row.dayprice"
            size="medium"
            placeholder="请输入日租金"
          />
        </el-form-item>
        <el-form-item label="特价日租金:" prop="dayprice0" style="width: 350px;">
          <el-input
            v-model="row.dayprice0"
            size="medium"
            placeholder="请输入特价日租金"
          />
        </el-form-item>
        <el-form-item label="最高时速:" prop="maxspeed" style="width: 350px;">
          <el-input
            v-model="row.maxspeed"
            size="medium"
            placeholder="请输入最高时速"
          >
            <template slot="append">Km/h</template>
          </el-input>
        </el-form-item>
        <el-form-item label="百公里加速:" prop="speed100time" style="width: 350px;">
          <el-input
            v-model="row.speed100time"
            size="medium"
            placeholder="请输入百公里加速"
          >
            <template slot="append">秒</template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="row.state0 !== 1" label="车标图片：" prop="icon">
          <upload-car-logo
            :folder="folder"
            :row="row"
            @upload-success="handleUpload"
          />
          <div style="color: red;">提示：请上传 大小小于500kb, 背景色为透明 的图片!</div>
        </el-form-item>
        <el-form-item v-if="row.state0 === 1" label="车标图片：" prop="icon">
          <img
            :src="row.host+row.icon"
            class="garage-dialog-img"
          >
        </el-form-item>
        <el-form-item v-if="row.state0 !== 1" label="车辆图片：" prop="img">
          <upload-car-img
            :folder="carfolder"
            :row="row"
            @upload-success="handleUploadCar"
          />
          <div style="color: red;">提示：请上传 大小小于500kb, 背景色为透明 的图片!</div>
        </el-form-item>
        <el-form-item v-if="row.state0 === 1" label="车辆图片：" prop="img">
          <img
            :src="row.host+row.img"
            class="garage-dialog-img"
          >
        </el-form-item>
        <el-form-item label="车辆状态:" prop="state" style="width: 350px;">
          <el-radio-group v-model="row.state">
            <el-radio :label="0">未租</el-radio>
            <el-radio :label="1">已租</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序:" prop="sort" style="width: 350px;">
          <el-input
            v-model="row.sort"
            size="medium"
            placeholder="请输入排序序号"
          />
        </el-form-item>
        <el-form-item label="是否从秀米导入:" prop="parseURL" style="width: 350px;">
          <el-checkbox v-model="row.parseURL" :true-label="1">是
          </el-checkbox>
        </el-form-item>
        <el-form-item prop="content" style="width: 95%" label="车辆信息：">
          <editor
            v-if="dialogVisible"
            :row="row"
            @on-change="handleChangeContent"
          />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UploadCarLogo from '@/components/UploadCarLogo'
import UploadCarImg from '@/components/UploadCarImg'
import mixin from '@/mixin/mixin'
import Editor from '@/components/Editor'

export default {
  name: 'GarageDialog',
  components: {
    UploadCarLogo,
    UploadCarImg,
    Editor
  },
  mixins: [mixin],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
    const validateMoney = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('金额不能为空!'))
      } else {
        if (!reg.test(value)) {
          callback(new Error('请输入正确的金额！'))
        } else {
          callback()
        }
      }
    }
    return {
      title: '',
      folder: 'carLogo',
      carfolder: 'car',
      editorContent: '',
      rules: {
        cartype0: [
          {
            required: true,
            message: '请选择车辆品牌',
            trigger: 'change'
          }
        ],
        cartype1: [
          {
            required: true,
            message: '请选择车辆类型',
            trigger: 'change'
          }
        ],
        des: [
          {
            required: true,
            message: '广告语不能为空',
            trigger: 'blur'
          },
          { max: 100, message: '长度必须小于100 个字符', trigger: 'blur' }
        ],
        dayprice: [
          {
            required: true,
            validator: validateMoney,
            trigger: 'blur'
          }
        ],
        dayprice0: [
          {
            required: true,
            validator: validateMoney,
            trigger: 'blur'
          }
        ],
        state: [
          {
            required: true,
            message: '请选择车辆状态',
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: true,
            message: '排序序号不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  updated() {
    if (this.row.id) {
      this.title = '编辑信息'
    } else {
      this.title = '新增车辆'
    }
  },
  mounted() {
    this.editorContent = this.row.content
  },
  created() {
    // console.log(this.row)
  },
  methods: {
    handleCancel() {
      this.$emit('cancel-dialog')
      this.$refs.garageDialog.resetFields()
    },
    handleConfirm() {
      this.$refs.garageDialog.validate((valid) => {
        if (valid) {
          this.$emit('confirm-dialog', {
            // dialog: this.$refs.garageDialog,
            id: this.row.id,
            cartype0: this.row.cartype0,
            cartype1: this.row.cartype1,
            des: this.row.des,
            dayprice: this.row.dayprice,
            dayprice0: this.row.dayprice0,
            maxspeed: this.row.maxspeed,
            speed100time: this.row.speed100time,
            icon: this.row.icon,
            img: this.row.img,
            state: this.row.state,
            sort: this.row.sort,
            parseURL: this.row.parseURL ? this.row.parseURL : '',
            content: this.editorContent ? this.editorContent : ''

          })
        } else {
          return false
        }
      })
    },
    handleUpload(url) {
      this.row.icon = url
    },
    handleUploadCar(url) {
      this.row.img = url
    },
    handleChangeContent(html) {
      this.editorContent = html
    }
  }
}
</script>

<style scoped>
  .garage-dialog-img {
    width: 120px;
    height: 60px;
    border: 1px dashed #ddd;
  }
</style>
